// src/components/DraggablePage.js
import React, {useEffect, useState} from 'react';
import GridLayout from 'react-grid-layout';
import Card from "@/pages/page/components/card";
// import {request} from "ice";
// import { useSearchParams } from 'ice';
import { Avatar, Input , Select, Button, Radio, DatePicker, Table } from 'antd';
import html2canvas from 'html2canvas';
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons';
import styles from "@/pages/page/index.module.scss";
import AddCardsCom from "@/pages/page/components/addCardsCom";
const PublishPage = () => {
  const [ddPieSource, setDdPieSource] = useState<any>({ sourceList: [], isRate: '' });
  const [userLineSource, setUserLineSource] = useState<any>({ ydata: [], sourceList: [] });
  const [accessUrl, setAccessUrl] = useState<string>('');
  const [data, setData] = useState<any>([
    {
      num:22345.34,
      date:'2024-01-08',
      type:1,
      name:'总资产'
    },
    {
      num:1200,
      date:'2024-02-08',
      type:2,
      name:'个人贷款'
    },
    {
      num:12345.34,
      date:'2024-03-08',
      type:3,
      name:'对公客户数',
      num1:6512,
      date1:'2024-01-08',
      name1:'人民币有效户数'
    },
    // {
    //   num:26785.34,
    //   date:'2024-04-08',
    //   type:4,
    //   name:'总资产'
    // },
    // {
    //   num:2345.34,
    //   date:'2024-05-08',
    //   type:1,
    //   name:'总资产'
    // },
    // {
    //   num:22345.56,
    //   date:'2024-06-08',
    //   type:1,
    //   name:'总资产'
    // },
    // {
    //   num:2345.34,
    //   date:'2024-05-08',
    //   type:1,
    //   name:'总资产'
    // },
    // {
    //   num:22345.56,
    //   date:'2024-06-08',
    //   type:1,
    //   name:'总资产'
    // },
  ]);
  const [layoutItems, setLayoutItems] = useState<any>([
    { i: 'a', x: 0, y: 0, w: 1, h: 1, component: <Card ddPieSource={ddPieSource} data={data[0]} userLineSource={userLineSource}/> },
    { i: 'b', x: 1, y: 0, w: 1, h: 1, component: <Card ddPieSource={ddPieSource} data={data[1]} userLineSource={userLineSource}/> },
    { i: 'c', x: 2, y: 0, w: 1, h: 1, component: <Card ddPieSource={ddPieSource} data={data[2]} userLineSource={userLineSource}/> }
  ]);

  // const searchParams = useSearchParams();
  // const query = searchParams.get('query'); // 获取名为'query'的搜索参数

// // 定义子组件数组
//   const layoutItems = [
//     { i: 'a', x: 0, y: 0, w: 1, h: 1, component: <Card ddPieSource={ddPieSource} data={data[0]} userLineSource={userLineSource}/> },
//     { i: 'b', x: 1, y: 0, w: 1, h: 1, component: <Card ddPieSource={ddPieSource} data={data[1]} userLineSource={userLineSource}/> },
//     { i: 'c', x: 2, y: 0, w: 1, h: 1, component: <Card ddPieSource={ddPieSource} data={data[2]} userLineSource={userLineSource}/> }
//   ];
  // 定义状态用于存储子组件的属性
  const [cardPropsArr, setCardPropsArr] = useState([]);
  const [title, setTitle] = useState('标题1');

  useEffect(() => {

    getChartData();
  }, []);

  useEffect(() => {
    console.log(localStorage.getItem('layout'),localStorage.getItem('layout')=='undefined','layout')
    if(localStorage.getItem('layout')&&localStorage.getItem('layout')!=='undefined'){
      let str =localStorage.getItem('layout') || ''
      let items=JSON.parse(str)
      let arr:any=[]
      items.map((item,index)=>{
        let {i,x,y,w,h,component}=item
        let obj:any={i,x,y,w,h}
        obj.component=<Card id={component?.id} onReceiveProps={handleCardProps} ddPieSource={component?.ddPieSource} data={component?.data} userLineSource={component?.userLineSource}/>
        arr.push(obj)
      })
      setLayoutItems(arr)
      // setLayoutItems([
      //   { i: 'a&', x: 0, y: 0, w: 1, h: 1, component: <Card id={1} onReceiveProps={handleCardProps} ddPieSource={ddPieSource} data={data[0]} userLineSource={userLineSource}/> },
      //   { i: 'b', x: 1, y: 0, w: 1, h: 1, component: <Card id={2} onReceiveProps={handleCardProps} ddPieSource={ddPieSource} data={data[1]} userLineSource={userLineSource}/> },
      //   { i: 'c', x: 2, y: 0, w: 1, h: 1, component: <Card id={3} onReceiveProps={handleCardProps} ddPieSource={ddPieSource} data={data[2]} userLineSource={userLineSource}/> }
      // ])
      // setLayoutItems(JSON.parse(localStorage.getItem('layout')||''))
    }

  }, []);

  // 定义一个函数，用于接收子组件的属性并保存到状态中
  const handleCardProps = (prop:any) => {
    let arr=cardPropsArr.filter((item:any)=>item.id==prop.id)
    let arrTemp: any=cardPropsArr
    if(!arr||arr?.length==0){
      arrTemp.push(prop)
    }
    setCardPropsArr(arrTemp);
  };


  const getChartData = async () => {
    // let url = '/api/1746815671858417666/5/pie_chart_data'
    // const res: any = await request({
    //   url,
    //   method: 'get',
    //   instanceName: 'openApi',
    //   params: {}
    // });
    const res={
      "code": "200",
      "msg": "成功",
      "data": {
        "result": [
          {
            "name": "运行中",
            "value": "40"
          },
          {
            "name": "初始化",
            "value": "38"
          },
          {
            "name": "成功",
            "value": "32"
          },
          {
            "name": "等待",
            "value": "30"
          },
          {
            "name": "就绪",
            "value": "38"
          },
          {
            "name": "中断完成",
            "value": "14"
          },
          {
            "name": "失败",
            "value": "10"
          }
        ]
      }
    }
    if (res && res.code === '200') {
      const {data} = res;
      if (data.result) {
        console.log(data.result)
        setDdPieSource({sourceList: data.result, isRate: true});
      }
    } else {
      setDdPieSource([]);
    }
  }

  const onLayoutChange = (newLayout) => {
    let arr:any=[]
    newLayout.map((item,index)=>{
      let {i,x,y,w,h}=item
      let obj:any={i,x,y,w,h}
      obj.component=<Card ddPieSource={ddPieSource} data={data[index]} userLineSource={userLineSource}/>
      arr.push(obj)
    })
    console.log(arr)
    setLayoutItems(arr);
  };

  const publishPage = async () => {
    try {
      const response = await fetch('http://localhost:8080/api/publish', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ layoutItems }),
      });

      const result = await response.json(); // 假设后端返回的是 JSON 数据
      console.log('Backend Response:', result);
    } catch (error) {
      console.error('Error publishing page:', error);
    }
  };

  // 发布布局到后端，并获取访问 URL
  const publishLayout = async () => {
    let layoutData:any=[]
    layoutItems.map((item,index)=>{
      let {i,x,y,w,h}=item
      let obj:any={i,x,y,w,h}
      console.log(cardPropsArr)
      obj.component=cardPropsArr[index]
      layoutData.push(obj)
    })
    // 假设 layout 是你的布局数据
    // let layoutData=[
    //   {
    //     i: 'a',
    //     x: 0,
    //     y: 0,
    //     w: 1,
    //     h: 1,
    //     component: {
    //       ddPieSource:{
    //         sourceList: [{
    //           "name": "运行中",
    //           "value": "40"
    //         },
    //           {
    //             "name": "初始化",
    //             "value": "38"
    //           },
    //           {
    //             "name": "成功",
    //             "value": "32"
    //           },
    //           {
    //             "name": "等待",
    //             "value": "30"
    //           },
    //           {
    //             "name": "就绪",
    //             "value": "38"
    //           },
    //           {
    //             "name": "中断完成",
    //             "value": "14"
    //           },
    //           {
    //             "name": "失败",
    //             "value": "10"
    //           }],
    //         isRate: true
    //       },
    //       data:{
    //         num: 22345.34,
    //         date: '2024-01-08',
    //         type: 1,
    //         name: '总资产'
    //       },
    //       userLineSource: {
    //         ydata: [],
    //         sourceList: []
    //       }
    //     }
    //   },
    //   {
    //     i: 'b',
    //     x: 1,
    //     y: 0,
    //     w: 1,
    //     h: 1,
    //     component: {
    //       ddPieSource:{
    //         sourceList: [{
    //           "name": "运行中",
    //           "value": "40"
    //         },
    //           {
    //             "name": "初始化",
    //             "value": "38"
    //           },
    //           {
    //             "name": "成功",
    //             "value": "32"
    //           },
    //           {
    //             "name": "等待",
    //             "value": "30"
    //           },
    //           {
    //             "name": "就绪",
    //             "value": "38"
    //           },
    //           {
    //             "name": "中断完成",
    //             "value": "14"
    //           },
    //           {
    //             "name": "失败",
    //             "value": "10"
    //           }],
    //         isRate: true
    //       },
    //       data:{
    //         num:1200,
    //         date:'2024-02-08',
    //         type:2,
    //         name:'个人贷款'
    //       },
    //       userLineSource: {
    //         ydata: [],
    //         sourceList: []
    //       }
    //     }
    //   },
    //   {
    //     i: 'c',
    //     x: 2,
    //     y: 0,
    //     w: 1,
    //     h: 1,
    //     component: {
    //       ddPieSource:{
    //         sourceList: [{
    //           "name": "运行中",
    //           "value": "40"
    //         },
    //           {
    //             "name": "初始化",
    //             "value": "38"
    //           },
    //           {
    //             "name": "成功",
    //             "value": "32"
    //           },
    //           {
    //             "name": "等待",
    //             "value": "30"
    //           },
    //           {
    //             "name": "就绪",
    //             "value": "38"
    //           },
    //           {
    //             "name": "中断完成",
    //             "value": "14"
    //           },
    //           {
    //             "name": "失败",
    //             "value": "10"
    //           }],
    //         isRate: true
    //       },
    //       data:{
    //         num:12345.34,
    //         date:'2024-03-08',
    //         type:3,
    //         name:'对公客户数',
    //         num1:6512,
    //         date1:'2024-01-08',
    //         name1:'人民币有效户数'
    //       },
    //       userLineSource: {
    //         ydata: [],
    //         sourceList: []
    //       }
    //     }
    //   }
    // ]

    // const id=searchParams?.id
    const id=localStorage.getItem('id')
    localStorage.setItem('title',title)
    // const docHtml: HTMLElement=document.getElementById('gridLayout')
    // html2canvas(docHtml).then(async (canvas) => {
    //   // const link = document.createElement("a");
    //   // link.href = canvas.toDataURL();
    //   // console.log(link.href)
    //   // link.setAttribute("download",  ".png");
    //   // link.style.display = "none";
    //   // document.body.appendChild(link);
    //   // link.click();
    //   let image=canvas.toDataURL()
    //   // const res: any = await request({
    //   //   url: '/api/publish-layout',
    //   //   method: 'POST',
    //   //   instanceName: 'layout_config',
    //   //   data: {layout: layoutData, id,image},
    //   // });
    //   // if(res){
    //   //   localStorage.setItem('id',res.accessUrl)
    //   //   setAccessUrl('http://localhost:11000/index/accessPage/'+ res.accessUrl);
    //   // }
    // });

  };

  const handleChange = (e: any) => {
    console.log(e.target.value);
    setTitle(e.target.value)
  };

  // 导出图片
  // const downloadImg = () => {
  //   html2canvas(document.getElementById('layout')).then((canvas) => {
  //     const link = document.createElement("a");
  //     link.href = canvas.toDataURL();
  //     link.setAttribute("download",  ".png");
  //     link.style.display = "none";
  //     document.body.appendChild(link);
  //     link.click();
  //   });
  // }

  return (
    <div>
      <div className={styles.top1}>
        <div className={styles.search1}>
          {/*<Input addonBefore="编辑标题" onChange={handleChange} >{title}</Input>*/}
          <Input addonBefore="编辑标题" placeholder={"请输入标题"} value={title} style={{ width: '100%' }} autoComplete="off" onChange={handleChange} maxLength={30} />
        </div>
        <div className={styles.button1}>
          <Button type={'primary'} onClick={publishLayout}>发布</Button>
        </div>
      </div>
      <div
        id={'gridLayout'}
      >
        {/*<GridLayout*/}
        {/*  className={styles.layout}*/}

        {/*  layout={layoutItems}*/}
        {/*  cols={3}*/}
        {/*  rowHeight={100}*/}
        {/*  width={window.innerWidth}*/}
        {/*  onLayoutChange={onLayoutChange}*/}
        {/*>*/}
        {/*  {layoutItems.map(item => (*/}
        {/*    <div className={styles.card} key={item.i} data-grid={item}>{item.component}</div>*/}
        {/*    // <div key={item.i}>Content for Card {item.i}</div>*/}
        {/*    // <Card key={item.i} ddPieSource={ddPieSource} data={item} userLineSource={userLineSource} listType={2}/>*/}
        {/*  ))}*/}
        {/*</GridLayout>*/}
        <AddCardsCom>
          {/* <Warningpending></Warningpending> */}
        </AddCardsCom>
      </div>

      <br/><br/><br/><br/><br/><br/><br/><br/>
      {accessUrl && (
        <div>
          <p>Access your published page at: <a href={accessUrl}>{accessUrl}</a></p>
        </div>
      )}
    </div>
  );
};

export default PublishPage;
